<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <!--如果是IE 就以标准渲染-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

    <!-- 视窗——————响应式布局 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />

    <!--当前页面的三要素-->
    <title>运维系统-运维工单详情页</title>
    <meta name="description" content="聚能优电" />
    <meta http-equiv="keywords" content="聚能优电" />
    <script type="text/javascript" src="../../js/verify.js"></script>
    <!-- css -->
    <link rel="stylesheet" type="text/css" href="../../css/common/common.css" />
    <link rel="stylesheet" type="text/css" href="../../css/orderdetail.css" />
    <link rel="stylesheet" type="text/css" href="../../layui/css/layui.css">
    <link rel="stylesheet" type="text/css" href="../../css/mobiscroll.custom.min.css" />
</head>

<body>
    <div id="container" class="orderdetail">
        <div class="orderdetail_01">
            <!--主屏内容-->
            <div class="orderdetail_screen">
                <div class="m_title">
                    <a href="JavaScript:history.go(-1);" class="back">
                        <img src="../../images/back.svg" alt="">
                    </a>
                    <span class="tit">新建工单</span>
                </div>


                <ul class="gj_con" style="margin-top:1.55rem;">
                    <li>
                        <span class="lileft">创建人</span><span class="liright">尧芸萍</span>
                    </li>
                </ul>
                
                <ul class="gj_con">
                    <li>
                        <span class="lileft">执行人</span>
                        <span class="liright">
                            <select name="" id="" style="width:50% !important;">
                                <option value="">请选择</option>
                                <option value="">王小小</option>
                                <option value="">王大大</option>
                                <option value="">黄哈哈</option>
                                <option value="">绿嘿嘿</option>
                                <option value="">白花花</option>
                            </select>
                            
                        </span>
                    </li>
                    <li>
                        <span class="lileft">工单名称</span>
                        <span class="liright">
                            <input type="text" placeholder="请输入">
                        </span>
                    </li>
                    <li>
                        <span class="lileft">工单类型</span>
                        <span class="liright">
                            <select name="" id="" style="width:50% !important;">
                                <option value="">请选择</option>
                                <option value="">王小小</option>
                                <option value="">王大大</option>
                                <option value="">黄哈哈</option>
                                <option value="">绿嘿嘿</option>
                                <option value="">白花花</option>
                            </select>
                        </span>
                    </li>
                    <li>
                        <span class="lileft" style="width:30% !important;">所属项目</span>
                        <span class="liright" style="width:70% !important;">
                            <select name="" id="">
                                <option value="">深中二航搅拌站</option>
                                <option value="">深中二公局S06标段</option>
                                <option value="">深中通道保利长大项目</option>
                                <option value="">中铁十局粤赣铁路项目</option>
                            </select>
                        </span>
                    </li>
                    <li>
                        <span class="lileft">工单截止时间</span>
                        <span class="liright">
                            <div class="section" id="timechose">
                                <input type="text" id="demo_date1" placeholder="点击选择日期" />
                            </div>
                        </span>
                    </li>
                </ul>

                <div class="hdnr_tit title">工单内容</div>
                <div class="cljg hdnr_con" style="margin-top:0.1rem;">
                    <textarea name="" id="" placeholder="请输入工单内容"></textarea>
                </div>

                <!-- 上传文件 -->
                <div class="layui-upload" style="margin-top:0.4rem;">
                    
                    <div class="layui-upload-list">
                        <table class="layui-table">
                            <thead>
                                <tr>
                                    <th>文件名</th>
                                    <th>大小</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody id="demoList"></tbody>
                        </table>
                    </div>

                    <button type="button" class="layui-btn layui-btn-normal" id="testList">选择多文件</button>
                    <button type="button" class="layui-btn" id="testListAction" style="font-size:0.24rem;">开始上传</button>
                    
                </div>

                <div class="wrap_btn">
                    <div class="sub_btn" style="margin-top:1rem;">提 交</div>
                </div>

            </div>
        </div>
    </div>


    <script>
        (function (win, doc) {
            var docEl = doc.documentElement || document.body; //获取HTML标签

            var container = doc.getElementById("container"); //container元素
            //判断是移动端设备还是PC,移动 就采用'orientationchange',横竖屏事件，PC端就采用onresize，窗口改变时间
            var resize =
                "onorientationchange" in win ? "orientationchange" : "resize";

            function rem() {
                docEl.style.fontSize = 100 * (container.clientWidth / 750) + "px";
            }

            //监听'DOMContent事件:DOM加载完成执行,如果DOMContent事件，那么执行rem函数
            doc.addEventListener("DOMContentLoaded", rem, false);

            //win下监听resize事件,如果resize事件，那么执行rem函数
            win.addEventListener(resize, rem, false);
        })(window, document);
    </script>
    <!-- js -->
    <script type="text/javascript" src="../../js/jquery.min.js"></script>
    <script type="text/javascript" src="../../js/mobiscroll.custom.min.js"></script>
    <script type="text/javascript" src="../../layui/layui.js"></script>
    <script>
        $(document).ready(function () {

            layui.use('upload', function(){
                var $ = layui.jquery
                ,upload = layui.upload;
            

                var demoListView = $('#demoList')
                ,uploadListIns = upload.render({
                    elem: '#testList'
                    ,url: 'https://httpbin.org/post' //改成您自己的上传接口
                    ,accept: 'file'
                    ,multiple: true
                    ,auto: false
                    ,bindAction: '#testListAction'
                    ,choose: function(obj){
                        var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                        //读取本地文件
                        obj.preview(function(index, file, result){
                        var tr = $(['<tr id="upload-'+ index +'">'
                            ,'<td>'+ file.name +'</td>'
                            ,'<td>'+ (file.size/1024).toFixed(1) +'kb</td>'
                            ,'<td>等待上传</td>'
                            ,'<td>'
                                ,'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
                                ,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
                                ,'</td>'
                            ,'</tr>'].join(''));

                        //单个重传
                        tr.find('.demo-reload').on('click', function(){
                        obj.upload(index, file);
                        });

                        //删除
                        tr.find('.demo-delete').on('click', function(){
                        delete files[index]; //删除对应的文件
                        tr.remove();
                        uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                        });

                        demoListView.append(tr);
                        });
                    }
                    ,done: function(res, index, upload){
                        if(res.files.file){ //上传成功
                        var tr = demoListView.find('tr#upload-'+ index)
                        ,tds = tr.children();
                        tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
                        tds.eq(3).html(''); //清空操作
                        return delete this.files[index]; //删除文件队列已经上传成功的文件
                        }
                        this.error(index, upload);
                    }
                    ,error: function(index, upload){
                        var tr = demoListView.find('tr#upload-'+ index)
                        ,tds = tr.children();
                        tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
                        tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
                    }
                });


                // 日期和时间控件
                var theme = "ios";
                var mode = "scroller";
                var display = "bottom";
                var lang = "zh";
                // 年月日选择1
                $('#demo_date1').mobiscroll().date({
                    theme: theme,
                    mode: mode,
                    display: display,
                    lang: lang
                });
            });
           


        });
    </script>

</body>

</html>